<template>
	<view class="brand-main" v-if="showList">
		<!-- 头部导航 -->
		<view class="brand">
			<image class="brand-logo" mode="aspectFit" :src="brand.logo_image"></image>
			<text class="f30">{{brand.name}}</text>
		</view>
		<!-- 选择按钮 -->
		<view class="select">
			<scroll-view scroll-x='true'>
				<swiper display-multiple-items=5>
					<swiper-item @click="selectTab( index,item.min,item.max)" v-for="(item,index) in  price" :key="index">
						<view class="select-btn" :class="[selectAc==index?'active':'']">{{item.value}}</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<scroll-view :style="{height:clientHeight+'px'}" scroll-y="true" v-if="count>0" @scrolltolower="onLoadMore"
			 scroll-top="top">
				<view class="list-main" v-for="(item,index) in listData" :key="index">
					<view class="car-tab">
						<view class="list-title"><text>{{item.title || ''}}</text></view>
						<view class="list-car" v-for="(listItem,liIndex) in item.child" @click="toCarDetail(listItem.id)" :key="liIndex">
							<view class="car-img">
								<image mode="aspectFill" lazy-load="true" :src="`${listItem.image}-t.m75xx`"></image>

							</view>
							<view class="car-des">
								<view class="car-title flex">
									<view>{{listItem.name}}</view>
									<view class="car-num">{{listItem.nums?'在售 '+listItem.nums+' 款':'未售'}}</view>
								</view>

								<view class="car-price">{{listItem.price_range}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<loadmore :loading-text="loadMoreText" @loadMore="onLoadMore" ref="loadMore"></loadmore>
			</scroll-view>
			<view class="nomore" v-else>
				<view class="nomore__icon">
					<text class="iconfontPT iconzanwushuju1"></text>
				</view>
				<view class="nomore__txt">暂无在售车系</view>
			</view>
		</view>


	</view>
</template>

<script>
	import loadmore from '../../../components/public/yy-load-more.vue'
	import {
		brand,
		brandPage
	} from "../../../../apis/new-car/index.js"
	export default {
		components: {
			loadmore
		},
		data() {
			return {
				tabList: ['在售', '未售/停售'],
				indexTab: 0, //选项卡选择,
				selectList: [], //选择按钮
				selectAc: 0, //按钮选择,
				brand: {},
				loadMoreText: ['查看更多', '加载中...', '没有更多啦'],
				price: [{
						value: '全部',
						min: '*',
						max: '*'
					},
					{
						value: '0-10万',
						min: '*',
						max: '10'
					}, {
						value: '10-20万',
						min: '10',
						max: '20'
					}, {
						value: '20-50万',
						min: '20',
						max: '50',
					}, {
						value: '50万以上',
						min: '50',
						max: '*',
					}
				], //价格区间
				listData: [],
				clientHeight: '',
				brand_id: '',
				is_sale: 1,
				showNomore: false,
				showBtn: false,
				showList: false,
				count: 0,
				params: {
					p: 1, //当前页
				},
				pages: 0, //共多少页
				top: 0
			}
		},
		onLoad(option) {
			let that = this;
			that.brand_id = option.brand_id;
			that.params.brand_id = that.brand_id;
			uni.showToast({
				title: '加载中',
				icon: 'loading',
				duration: 10000000,
				mask: true,
			});
			that.getList(that.params)
			clearTimeout(that.timeout)
			that.timeout = setTimeout(() => {
				uni.hideToast();
			}, that.count > 10 ? 500 : 200)
			uni.setNavigationBarTitle({
				title: option.name
			})
			uni.getSystemInfo({
				success: function(res) {
					let height = res.windowHeight - 112
					that.clientHeight = height
				}
			});

		},
		onReachBottom() {
			this.onLoadMore()
		},
		methods: {
			/*去车系页*/
			toCarDetail(id) {
				uni.navigateTo({
					url: '../../detail/carDetail/carDetail?v_id=' + id
				})
			},
			/**切换选择按钮 */
			selectTab: function(index, min, max) {
				let that = this;
				that.selectAc = index
				that.params.min_price = min
				that.params.max_price = max
				that.params.p = 1
				that.top = 0
				that.getList(that.params)
			},
			/*首次加载列表*/
			getList(params) {
				let _self = this
				brand(params).then(res => {
					_self.brand = res.data.brand
					_self.listData = _self.formatDataList(res.data.list) || []
					_self.count = res.data.list_count
					_self.pages = res.data.pages
					if (_self.pages < _self.params.p) {
						_self.$refs.loadMore.finish(false)
					}
					_self.showList = true;
				}).catch(err => {
					console.log(err)
				})
			},
			// 分页加载
			onLoadMore() {
				let _self = this,
					page = _self.params.p,
					params = _self.params
				page++
				if (page <= _self.pages) {
					let list = [],
						listchild = [],
						datachild = []
					_self.params.p = page
					brandPage(params).then(res => {
						list = _self.formatDataList(res.data.page_list) || []
						_self.listData = _self.listData.concat(list)
					}).catch(err => {
						console.log(err)
					})
					_self.$refs.loadMore.finish(true)
				} else {
					_self.$refs.loadMore.finish(false)
				}
			},

			/* 调整数据格式 */
			formatDataList(list) {
				let newList = []
				for (let i in list) {
					newList.push({
						title: i,
						child: list[i]
					})
				}
				return newList
			},
			clone(obj) {
				let newObj = JSON.stringify(obj);
				let objClone = JSON.parse(newObj);
				return objClone;
			},
		}
	}
</script>


<style lang="less">
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nomore {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 500rpx;
		flex-direction: column;

		&__icon {
			color: #666;

			.iconfontPT {
				font-size: 110rpx;
			}
		}

		&__txt {
			margin-top: 10rpx;
			color: #999;
		}
	}

	.car-num {
		color: #999;
		font-size: 12px;
	}

	.brand-main {
		background: #fff;

		ad-bar {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-items: center;
			text-align: center;
			align-items: center;
		}

		.head-bar .nva-title {
			width: 80%;
			display: flex;
			height: 100%;
			margin: 0 auto;
		}

		.head-bar .nva-title .title {
			flex: 1;
			width: 100%;
			height: 100%;
			font-size: 36rpx;
			color: #333;
			justify-items: center;
			align-items: center;
		}

		.head-bar .nva-title .title.active text {
			border-bottom: 1rpx solid #E41805;
			display: inline-block;
			padding: 4rpx 8rpx;
			color: #E41805;
		}

		/* 选择按钮 */
		.select {
			height: 62rpx;
			margin: 20rpx 30rpx;
			white-space: nowrap;
		}

		.select swiper {
			height: 62rpx;
		}

		.select-btn {
			display: inline-block;
			width: 130rpx;
			height: 50rpx;
			color: #333;
			font-size: 24rpx;
			margin-right: 20rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 5rpx;
		}

		.select-btn.active {
			background-color: #FFE9E7;
			color: #E41805;
		}

		/* 价格区间 */
		.price {
			display: flex;
			margin: 45rpx 30rpx 40rpx;
		}

		.price .price-single {
			width: 130rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #f8f8f8;
			border-radius: 5rpx;
			text-align: center;
			color: #333;
			margin-left: 10rpx;
			font-size: 24rpx;
		}

		.price .price-single:first-child {
			margin-left: 0;
		}

		/* 列表 */
		.list {
			width: 100%;
			height: auto;
		}

		.brand {
			background: #fff;
			padding: 30rpx;
			display: flex;
			justify-content: left;
			align-items: center;
		}

		.brand-logo {
			width: 75rpx;
			height: 65rpx;
			margin-right: 20rpx;
		}

		.list-main {
			width: 100%;
			height: auto;
		}

		.car-tab {}

		.list-title {
			width: 100%;
			line-height: 40rpx;
			background-color: #f8f8f8;
		}

		.list-title text {
			margin-left: 30rpx;
			display: inline-block;
			color: #676767;
			font-size: 20rpx;
		}

		.list-car {
			padding-bottom: 30rpx;
			border-bottom: 1px solid rgba(206, 203, 203, 0.5);
			margin: 35rpx 30rpx;
			display: flex;

			&:last-child {
				border-bottom: 0;
				padding-bottom: 0;
			}
		}

		.list-car .car-des {
			flex: 1;
		}

		.car-img {
			width: 215rpx;
			height: 120rpx;
			margin-right: 20rpx;
			background: #fff;
		}

		.car-img image {
			width: 100%;
			height: 100%;
			border-radius: 6rpx
		}

		.car-title {
			font-size: 30rpx;
			line-height: 36rpx;
			color: #333;
		}

		.car-price {
			color: #E41805;
			margin-top: 20rpx;
			font-size: 24rpx;
		}

		.f30 {
			font-size: 30rpx;
		}
	}
</style>
